<template>
	<view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItems"
			styleType="text"></uni-segmented-control>
		<view class="navs">
			<uni-segmented-control :current="currentValue" :values="item" @clickItem="onClickItem" styleType="button"
				activeColor="#007aff"></uni-segmented-control>
		</view>
		<view v-if="state === true" class="rows">

			<view style="padding: 0 6rpx; width: 33%;"> <uni-datetime-picker type="date" :clear-icon="false"
					v-model="timeData.list.startDate" /></view>
			至
			<view style="padding: 0 6rpx; width: 33%;">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="timeData.list.endDate" />
			</view>

			<button style="line-height: 60rpx; margin: 0 10rpx;" type="primary" @click="getCharges('',timeData.list)">
				确定
			</button>




		</view>

		<view class="content">
			<view v-if="current === 0">
				<view style="padding: 22rpx;">
					<view class="headers_title">
						<view class="le">
							<image src="../../static/mar.png"></image>
							<view class="text">
								营业数据
							</view>
						</view>
						<view class="">
							<button type="primary" @click="refresh">
								<image src="../../static/sx.png"></image>
								刷新
							</button>
						</view>
					</view>


					<uni-row>
						<uni-col>
							<view class="item">
								<view style="color: red;">
									{{data.totalProfit}}
								</view>
								<view>
									利润(元)
								</view>
							</view>

						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="12">
							<uni-card>
								<view class="item">
									<view style="color: red;">
										{{data.totalAmount}}
									</view>
									<view>
										总金额(元)
									</view>
								</view>

							</uni-card>
						</uni-col>
						<uni-col :span="12">
							<uni-card>
								<view class="item">
									<view style="color: red;">
										{{data.receivable}}
									</view>
									<view>
										应收金额(元)
									</view>
								</view>
							</uni-card>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="12">
							<uni-card>
								<view class="item">
									<view style="color: red;">
										{{data.actualPayment}}
									</view>
									<view>
										实收金额(元)
									</view>
								</view>

							</uni-card>
						</uni-col>
						<uni-col :span="12">
							<uni-card>
								<view class="item">
									<view style="color: red;">
										{{data.derate}}
									</view>
									<view>
										优惠金额(元)
									</view>
								</view>
							</uni-card>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="12">
							<uni-card>
								<view class="item">
									<view style="color: red;">
										{{data.arrearage}}
									</view>
									<view>
										欠费合计(元)
									</view>
								</view>

							</uni-card>
						</uni-col>
						<uni-col :span="12">
							<uni-card>
								<view class="item">
									<view style="color: red;">
										{{data.refundMoneyTotal}}
									</view>
									<view>
										退费合计(元)
									</view>
								</view>
							</uni-card>
						</uni-col>
					</uni-row>

				</view>
			</view>
			<view v-if="current === 1">
				选项卡2的内容
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";

	import {
		getDateRang
	} from "../../utils/getDateRang.js"

	import {
		getCharge
	} from "./request.js"

	const data = ref({})

	const timeData = reactive({
		list: []
	})
	const getCharges = (e, arr) => {
		console.log(e, arr);
		timeData.list = getDateRang(e, arr)
		getCharge({
			startDate: timeData.list[0],
			endDate: timeData.list[1]
		}).then((res) => {
			console.log(res);
			data.value = res.data
		})
	}

	getCharges("today")
	const items = ref(['总览', '医生'])
	const item = ref(['昨日', '今日', '近七天', '近30天', '自定义'])
	const current = ref(0)
	const currentValue = ref(1)
	const state = ref(false)

	const onClickItems = (e) => {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
	}
	const onClickItem = (e) => {
		if (currentValue.value != e.currentIndex) {
			currentValue.value = e.currentIndex;
		}


		if (e.currentIndex === 0) {
			state.value = false
			getCharges("yesterday")
		} else if (e.currentIndex === 1) {
			state.value = false
			getCharges("today")
		} else if (e.currentIndex === 2) {
			state.value = false
			getCharges("pastWeek")
		} else if (e.currentIndex === 3) {
			state.value = false
			getCharges("pastMonth")
		} else if (e.currentIndex === 4) {
			timeData.list = {
				startDate: "",
				endDate: ""
			}

			state.value = true
		}
	}

	const refresh = () => {
		currentValue.value = 1
		getCharges("today")
	}
</script>

<style lang="scss">
	.content {
		padding: 12rpx;
	}

	.navs {
		.segmented-control__item {
			margin: 12rpx 6rpx;
			border-left: 1rpx solid #ccc;
			border-radius: 6rpx;
		}
	}

	.headers_title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		border-bottom: 1px solid #ccc;
		padding-bottom: 18rpx;

		.le {
			display: flex;
			align-items: center;

			.text {
				font-size: 36rpx
			}
		}

		image {
			width: 36rpx;
			height: 36rpx;
			vertical-align: middle
		}

		button {
			border-radius: 0;
			line-height: 68rpx;
			font-size: 32rpx;
		}
	}

	.item {
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
	}

	.rows {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>